<template>
  <div>
    <h1>loop</h1>
    <button @click="changeMap">切换地图数据</button>
    <div class="mapContainer" id="mapContainer" ref="mapContainerRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from "vue";
import * as echarts from "echarts";
import 'echarts-gl'
import 'echarts-liquidfill'

import useEchartMapOption from "./use-echart-map-option-loop";
import mockData from "./mockTimerData"


let myChart;
const mapName = "china"; // map3
const mapContainerRef = ref(null);
let timeTicket: any = null;
var count = 0;
const timeNumber = 1000


// 外部配置项
const setting = {
  zoom: 1,
  roam: true,
  labelStyle: {
    fontSize: 20
  },
  data: mockData
}

const init = async () => {
  myChart = echarts.init(mapContainerRef.value);

  // const mapName = "china"; // map1
  const { getOption } = useEchartMapOption(mapName)
  const option = getOption(setting);
  const chinaGeoJson = await getMapData(mapName);
  // option.series[0].
  // option.geo[0].data = chinaGeoJson

  console.log("option", option);
  echarts.registerMap(mapName, chinaGeoJson); // 注册可用地图，名称需要一致
  myChart.setOption(option);

  // updateOption({
  //   option,
  //   myChart
  // })
  loadTimer()
};


const loadTimer = () => {
  console.log("加载定时器", myChart);
  const { getOption } = useEchartMapOption(mapName)
  const option = getOption(setting);
  // var mapData = option.series[0].data;
  // option.series[0].data.forEach(element => {
  //   element.selected = false
  // });
  console.log("option", option.series);
  // console.log("mapData",mapData);



  // var mapData = option.series[0].data;
  var highlightedIndex = 0; // 初始高亮地区的索引
  var count = 0;
  var timeTicket: any = null;

  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: 1
  });



  // var dataLength = option.series[0].data.length;
  // var dataLength = 0
  // timeTicket && clearInterval(timeTicket);
  // timeTicket = setInterval(function () {
  //   console.log("轮播");

  //   // myChart.dispatchAction({
  //   //   type: "downplay",
  //   //   seriesIndex: 0,
  //   // });
  //   myChart.dispatchAction({
  //     type: "highlight",
  //     seriesIndex: 0,
  //     dataIndex: 0
  //   });
  //   // myChart.dispatchAction({
  //   //   type: "showTip",
  //   //   seriesIndex: 0,
  //   //   dataIndex: 0
  //   // });

  //   count++;
  // }, timeNumber);




  // 设置新的高亮状态
  // mapData[highlightedIndex].selected = true;
  // 重新渲染图表
  // myChart.clear(); // 清空echarts数据
  // myChart.setOption(option);
  // setInterval(function () {
  //   console.log("显示高亮", mapData[highlightedIndex].selected);

  //   // 取消之前的高亮状态
  //   // mapData.forEach(function (item) {
  //   //   item.selected = false;
  //   // });
  //   // 设置新的高亮状态
  //   mapData[highlightedIndex].selected = true;
  //   // // 重新渲染图表
  //   myChart.clear() // 清空echarts数据
  //   myChart.setOption(option);
  //   // // 更新高亮索引，确保在数组范围内循环
  //   console.log("显示",option);

  //   // highlightedIndex = (highlightedIndex + 1) % mapData.length;
  // }, 2000); // 每隔2秒切换一次高亮地区
  // console.log("myChart.dispatchAction", myChart.dispatchAction);
  // myChart.dispatchAction({
  //   type: "highlight",
  //   seriesIndex: 0,
  //   dataIndex: 1,
  // });
  // var dataLength = option.series[0].data.length;
  // timeTicket = setInterval(function () {
  //   myChart.dispatchAction({
  //     type: 'highlight',
  //     seriesIndex: 0,
  //     dataIndex: (count) % 10
  //   });
  //   count++;
  // }, 1000);
}

const changeMap = async () => {
  console.log("切换");
  const mapName = "jiangxi"; // map1
  const chinaGeoJson = await getMapData(mapName);
  const { getOption } = useEchartMapOption(mapName)
  echarts.registerMap(mapName, chinaGeoJson); // 注册可用地图，名称需要一致
  const option = getOption(setting);
  // option.geo[0].data = chinaGeoJson
  myChart.setOption(option);
  console.log("chinaGeoJson", chinaGeoJson);
}

const getMapData = async (mapName) => {
  const response = await fetch(`./public/data/${mapName}.geojson`); // 请将'china.json'替换为实际的地图数据文件路径
  return await response.json();
};

const changeTooltipSytle = () => {
  // tooltipClass
  setTimeout(() => {
    const tooltipEl = document.querySelector(".tooltipClass")
    console.log("changeTooltipSytle", tooltipEl);
    tooltipEl.style.background = 'red !important'
    // tooltipEl.setAttribute('style', 'background-color: red !important; color: white;');
  }, timeNumber + 1000);
}

onMounted(() => {
  init();
  // changeTooltipSytle();


});
</script>

<style scoped>
.mapContainer {
  width: 1200px;
  height: 800px;
  border: 0.0625rem solid #000;
}

.tooltipClass {}
</style>
